<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div v-for="item in goodsList" :key="item.id">
  <h3>{{item.goodsName}}</h3>
  <p>价格 :{{item.goodsPrice | currency("￥",3)}}</p>
  <p>上架时间: {{item.addTime | date}}</p>
</div>
</div>
</body>
<script>
  new Vue({
    el:"#root",
    data:{
      goodsList:[
        {
          id:1,
          goodsName:"梨",
          goodsPrice:34.567222,
          addTime:Date.now()-999999999999
        },
        {
          id:2,
          goodsName:"桃子",
          goodsPrice:78.99899,
          addTime:Date.now()-88888888888
        }
      ]
    },
    filters:{
      currency(v,type="$",len=2) {
          return type+v.toFixed(2);
      },
      date(v){
        const time = new Date(v);
        return time.getFullYear()+"-"+
                (time.getMonth()+1).toString().padStart(2,0)+"-"+
                time.getDate().toString().padStart(2,0)+" "+
                time.getHours().toString().padStart(2,0)+":"+
                time.getMinutes().toString().padStart(2,0)+":"+
                time.getSeconds().toString().padStart(2,0);
      }
    }


  })
</script>
</html>